<template>
  <div class="network">
    <div class="left">
      <div v-if="settlementData" class="settlement">
        <div class="title flex">网点总部结算</div>
        <div class="balance shade">
          <div class="text">账户余额</div>
          <div class="money">￥{{ settlementData.accountBalance }}</div>
        </div>
        <div class="total flex">
          <div class="basic shade">
            <div class="name">
              <img src="@/static/image/zhangh@2x.png" alt="">基本户
            </div>
            <div class="money">余额（元）</div>
            <div class="number">¥{{ settlementData.basicHousehold }}</div>
            <div class="button">
              <el-button type="primary">充值</el-button>
              <el-button>提现</el-button>
            </div>
          </div>
          <div class="payment shade">
            <div class="name">
              <img src="@/static/image/zhangh@2x.png" alt="">代收货款
            </div>
            <div class="money">余额（元）</div>
            <div class="number">¥{{ settlementData.replaceCollect }}</div>
            <div class="button">
              <el-button type="primary">充值</el-button>
              <el-button>提现</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="analysis">
        <div class="title flex">
          <div class="name">账单收支分析</div>
          <div>
            <SelectMonth />
          </div>
        </div>
        <div class="total">
          <span class="name">收支合计（元）</span>
          <span class="number">33,848.537</span>
        </div>
        <div class="in-out">
          <div class="text flex">
            <div class="in flex">
              <div class="icon">收</div>
              <div class="number">87,748.282</div>
            </div>
            <div class="out flex">
              <div class="number">53,899.745</div>
              <div class="icon">支</div>
            </div>
          </div>
          <div class="pk flex">
            <div class="in" />
            <div class="out" />
          </div>
        </div>
        <div class="date">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
        <div class="hr" />
        <div class="fluctuate flex">
          <div class="item">
            <div class="name flex">
              <div class="in">收 0</div>
              <div class="text">奖惩：-195.1</div>
              <div class="out">195.1 支</div>
            </div>
            <div>
              <Score
                :color="`#F4B25A`"
                :bg-color="`#2087D0`"
                :show-text="false"
              />
            </div>
          </div>
          <div class="item">
            <div class="name flex">
              <div class="in">收 0</div>
              <div class="text">奖惩：-195.1</div>
              <div class="out">195.1 支</div>
            </div>
            <div>
              <Score
                :color="`#F4B25A`"
                :bg-color="`#2087D0`"
                :show-text="false"
              />
            </div>
          </div>
          <div class="item">
            <div class="name flex">
              <div class="in">收 0</div>
              <div class="text">奖惩：-195.1</div>
              <div class="out">195.1 支</div>
            </div>
            <div>
              <Score
                :color="`#F4B25A`"
                :bg-color="`#2087D0`"
                :show-text="false"
              />
            </div>
          </div>
          <div class="item">
            <div class="name flex">
              <div class="in">收 0</div>
              <div class="text">奖惩：-195.1</div>
              <div class="out">195.1 支</div>
            </div>
            <div>
              <Score
                :color="`#F4B25A`"
                :bg-color="`#2087D0`"
                :show-text="false"
              />
            </div>
          </div>
          <div class="item">
            <div class="name flex">
              <div class="in">收 0</div>
              <div class="text">奖惩：-195.1</div>
              <div class="out">195.1 支</div>
            </div>
            <div>
              <Score
                :color="`#F4B25A`"
                :bg-color="`#2087D0`"
                :show-text="false"
              />
            </div>
          </div>
          <div class="item">
            <div class="name flex">
              <div class="in">收 0</div>
              <div class="text">奖惩：-195.1</div>
              <div class="out">195.1 支</div>
            </div>
            <div>
              <Score
                :color="`#F4B25A`"
                :bg-color="`#2087D0`"
                :show-text="false"
              />
            </div>
          </div>
          <div class="item">
            <div class="name flex">
              <div class="in">收 0</div>
              <div class="text">奖惩：-195.1</div>
              <div class="out">195.1 支</div>
            </div>
            <div>
              <Score
                :color="`#F4B25A`"
                :bg-color="`#2087D0`"
                :show-text="false"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">网点内部结算</div>
      <div class="deal flex">
        <div class="shade flex">
          <div>
            <img src="@/static/image/chzhji@2x.png">
            账户充值
          </div>
          <div>
            <el-button type="primary">充值</el-button>
          </div>
        </div>
        <div class="shade flex">
          <div>
            <img src="@/static/image/tix@2x.png">
            提现
          </div>
          <div>
            <el-button type="primary">提现</el-button>
          </div>
        </div>
      </div>
      <div class="setting shade">
        <div class="flex">
          <div class="text">预警配置</div>
          <div><el-button type="primary">保存</el-button></div>
        </div>
        <el-form :inline="true">
          <el-form-item label="开户网点">
            <el-input placeholder="请选择" />
          </el-form-item>
          <el-form-item label="账户名称">
            <el-input placeholder="请选择" />
          </el-form-item>
          <el-form-item label="接收人">
            <el-input placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="警戒线提现金额">
            <el-input placeholder="请输入金额" />
          </el-form-item>
          <el-form-item label="提醒方式">
            <el-radio-group>
              <el-radio label="短信" />
              <el-radio label="钉钉" />
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="audit shade">
        <div class="title">充值/提现审核</div>
        <div class="table">
          <el-form :inline="true">
            <div class="flex">
              <div>
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="reviewForm.date"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="MM-dd"
                    @change="getReviewDate"
                  />
                </el-form-item>
                <el-form-item label="审核状态">
                  <el-select
                    v-model="reviewForm.auditStatus"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.lable"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <div class="input-button">
                <el-form-item>
                  <el-input
                    v-model="reviewForm.keyword"
                    placeholder="请输入账户名称或账户编号"
                  />
                </el-form-item>
                <el-button type="primary" @click="searchReview">搜索</el-button>
              </div>
            </div>
          </el-form>
          <el-table
            ref="multipleTable"
            :data="tableData"
            height="260px"
            border
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="日期" width="120">
              <template slot-scope="scope">{{ scope.row.createTime }}</template>
            </el-table-column>
            <el-table-column prop="accountNumber" label="账户编号" width="120" />
            <el-table-column
              prop="accountName"
              label="账户名称"
            />
            <el-table-column
              prop="transactionAmount"
              label="充值/提现金额"
            />
            <el-table-column
              prop="auditStatus"
              label="审核状态"
            />
          </el-table>
          <div class="button">
            <el-button>驳回</el-button>
            <el-button type="primary">通过</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBill, getReview, getHeadquartersSettlement } from '@/api/network'

export default {
  name: 'Network',
  data() {
    return {
      options: [
        {
          label: '未审核',
          value: '未审核'
        },
        {
          label: '已审核',
          value: '已审核'
        },
        {
          label: '已驳回',
          value: '已驳回'
        }
      ],
      date: null,
      tableData: null,
      multipleSelection: [],
      billData: null,
      settlementData: null,
      reviewForm: {
        auditStatus: '',
        endTime: '',
        keyword: '',
        startTime: '',
        date: ''
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getBillData()
      this.getReviewData()
      this.getHeadquartersSettlementData()
    },
    searchReview() {
      this.getReviewData()
    },
    getBillData() {
      getBill().then((res) => {
        // console.log(res);
      })
    },
    getReviewData() {
      getReview(this.reviewForm).then((res) => {
        this.tableData = res.data
      })
    },
    getReviewDate(date) {
      if (date) {
        this.reviewForm.startTime = this.formatDate(date[0])
        this.reviewForm.endTime = this.formatDate(date[1])
      } else {
        this.reviewForm.startTime = ''
        this.reviewForm.endTime = ''
      }
    },
    getHeadquartersSettlementData() {
      getHeadquartersSettlement().then((res) => {
        this.settlementData = res.data
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    formatDate(date) {
      let month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      let day = date.getDate()
      day = day < 10 ? '0' + day : day
      return month.toString() + '-' + day
    }
  }
}
</script>
<style lang="scss" scoped>
.network {
  padding-top: 30px;
  padding-left: 30px;
  padding-bottom: 30px;
  padding-right: 12px;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title {
    font-size: 20px;
  }

  .shade {
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #ebecee;
  }

  .left {
    width: 836px;

    & > div {
      padding: 24px;
      background: #ffffff;
      box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
      border-radius: 8px;
    }

    .settlement {
      height: 394px;

      .balance {
        margin-top: 16px;
        padding-top: 24px;
        padding-left: 24px;
        height: 100px;

        .text {
          color: #666;
        }

        .money {
          margin-top: 10px;
          font-size: 24px;
        }
      }

      .total {
        margin-top: 16px;

        & > div {
          padding: 24px;
          width: 386px;
          height: 196px;

          .name {
            height: 22px;
            line-height: 22px;
            font-size: 20px;
            color: #666;

            img {
              margin-right: 8px;
              vertical-align: bottom;
              width: 20px;
            }
          }

          .money {
            margin-top: 16px;
            font-size: 16px;
            color: #666666;
          }

          .number {
            margin-top: 8px;
            font-weight: 500;
            font-size: 24px;
            color: #333333;
          }

          .button {
            margin-top: 14px;

            & > .el-button + .el-button {
              margin-left: 20px;
            }

            .el-button {
              padding: 12px 50px;
              font-size: 16px;
            }
          }
        }
      }
    }

    .analysis {
      margin-top: 20px;
      height: 480px;

      .total {
        margin-top: 16px;

        .name {
          font-weight: 400;
          font-size: 18px;
          color: #666666;
        }

        .number {
          font-weight: 500;
          font-size: 24px;
          color: #333333;
        }
      }

      .in-out {
        margin-top: 14px;

        .text {
          .icon {
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: #ffffff;
            border-radius: 4px;
          }

          .number {
            font-size: 20px;
          }

          .in {
            & > div + div {
              margin-left: 6px;
            }

            .icon {
              border: 1px solid #f4b25a;
              color: #f4b25a;
            }
          }

          .out {
            & > div + div {
              margin-left: 6px;
            }

            .icon {
              border: 1px solid #2087d0;
              color: #2087d0;
            }
          }
        }

        .pk {
          margin-top: 14px;
          width: 100%;
          height: 16px;

          div {
            height: 16px;
            border-radius: 8px;
          }

          .in {
            width: 488px;
            background: linear-gradient(90deg, #f07171, #f4b259);
          }

          .out {
            width: 300px;
            background: linear-gradient(90deg, #9565ed, #2087d0);
          }
        }
      }

      .date {
        margin: 16px auto;
        width: 350px;
        height: 40px;
      }

      .hr {
        width: 788px;
        height: 1px;
        background: #ebecee;
        border-radius: 1px;
      }

      .fluctuate {
        flex-wrap: wrap;

        .item {
          margin-top: 20px;
          width: 370px;

          .name {
            margin-bottom: 6px;

            .in {
              color: #f4b25a;
            }

            .out {
              color: #2087d0;
            }
          }
        }
      }
    }
  }

  .right {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
    border-radius: 8px;
    width: 1004px;
    height: 894px;

    .el-button {
      width: 88px;
      font-size: 16px;
    }

    .deal {
      margin-top: 16px;

      & > div {
        padding: 20px 36px;
        width: 468px;
        height: 96px;

        img {
          margin-right: 16px;
          width: 56px;
          height: 56px;
          vertical-align: middle;
        }
      }
    }

    .setting {
      margin-top: 20px;
      padding: 12px 24px;
      width: 956px;
      height: 196px;

      .text {
        font-size: 18px;
      }

      .el-form {
        margin-top: 16px;

        .el-form-item {
          margin-right: 50px;
          margin-bottom: 18px;

          &::v-deep .el-input__inner {
            height: 36px;
          }
        }
      }
    }

    .audit {
      margin-top: 20px;
      padding: 20px;
      height: 478px;

      .title {
        padding-left: 4px;
      }

      .table {
        margin-top: 18px;
        padding: 20px;
        height: 396px;
        background: #ffffff;
        border-radius: 8px;

        .el-form {
          .el-form-item {
            margin-right: 20px;

            &::v-deep .el-date-editor {
              width: 202px;
              height: 36px;
            }

            &::v-deep .el-select {
              width: 116px;

              .el-input__inner {
                height: 36px;
              }
            }
          }
        }

        .input-button {
          position: relative;

          .el-form-item {
            &::v-deep .el-input {
              width: 312px;

              .el-input__inner {
                height: 36px;
              }
            }
          }

          .el-button {
            position: absolute;
            top: 2px;
            right: 0;
            padding-top: 8px;
            height: 36px;
            border-radius: 0 4px 4px 0;
          }
        }

        .el-table {
          border-radius: 8px;

          &::v-deep .el-table__header tr th {
            background-color: #f5f5f5;
          }
        }

        .button {
          margin-top: 10px;
          display: flex;
          justify-content: flex-end;

          .el-button {
            padding-top: 8px;
            height: 36px;
          }
        }
      }
    }
  }
}
</style>
